<template>
  <div class='banner'>
  <transition :name="transitionName" >
      <router-view class="Router"></router-view>
 </transition >
    <cube-tab-bar
    v-model="selectedLabelDefault"
    :data="tabs"
    @change="changeTarbar"
  >
 
  </cube-tab-bar>
  <div class="countnum" v-if="getCountNum">
    {{getCountNum}}</div>
  </div>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
  data() {
    return {
      transitionName:'slide-left',
      selectedLabelDefault: '首页', 
      tabs: [{
        label: '首页',
        icon: 'cubeic-home'
      }, {
        label: '分类',
        icon: 'cubeic-tag'
      }, {
        label: '搜索',
        icon: 'cubeic-search'
      }, {
        label: '购物车',
        icon: 'cubeic-mall'
      },{
        label: '我的',
        icon: 'cubeic-person'
      }]
    }
  
  },
  computed: {
        ...mapGetters([
          'getCountNum',
        ])
  },
  methods: {
    //底部菜单栏的改变跳转
    changeTarbar(label){
      switch (label) {
        case '首页':
          this.$router.push('/botNav/home');
          break;
         case '购物车':
          this.$router.push('/botNav/mall');
          break;
         case '我的':
          this.$router.push('/botNav/mine');
          break;
         case '搜索':
          this.$router.push('/botNav/search');
          break;
         case '分类':
          this.$router.push('/botNav/classify');
          break;
        default:
          break;
      }
    }
  },
  //刚进入这个页面时，需要跳到对应的导航页
  mounted () {
    switch (this.$route.name) {
      case 'mine':
        this.selectedLabelDefault='我的';
        break;
      case 'mall':
        this.selectedLabelDefault='购物车';
        break;
      case 'home':
        this.selectedLabelDefault='首页';
        break;
      case 'search':
        this.selectedLabelDefault='搜索';
        break;
      case 'classify':
        this.selectedLabelDefault='分类';
        break;
      default:
        break;
    }
  }
};
</script>
<style lang='stylus' scoped>
.banner {
  overflow:hidden;
   .Router{
      width:100%;
   }
 
 .slide-left-enter{
   opacity:1;
   transform:translate(100%,0);
   
 }
 .slide-left-leave-to{
   opacity:0;
   transform:translate(-100%,0);
   
 }
 
 .slide-left-leave-active,
  .slide-left-enter-active,
 {
   transition:all 0.5s ease;
   opacity:0;
   transform:translate(-100%,0);
  
 }
  .mainPageHref {
    img {
      width: 100%;
      height: 150px;
    }
  }
  .categoryList 
  ul{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    margin-top:10px;
  li {
    width:20%;
    margin-top:10px;
    p{
      font-size:14px;
    }
    img{
      width:40px;
      height: 40px;
      border-radius:50%
    }
  }
  }
  ::v-deep .cube-tab-bar{
    position:fixed;
    z-index:1000;
    bottom:0px;
    left:0px;
    width:100%;
    background-color:#ffff;
    font-size:16px;
    i{
      font-size:20px;
    }
  
  }
    .countnum{
      position:fixed;
      box-sizing:border-box;
     
      left:70%;
      bottom:35px;
      z-index:2000;
      height:16px;
      width:16px;
      border-radius:50%;
      background-color:red;
      color:white;
      font-size:14px;
      text-align:center;
      line-height:16px;
    
    }
 
}
</style>